<template>
  <view class="page">
    <u-navbar :auto-back="true" bg-color="transparent" :leftIcon="null" title="我的" :placeholder="true" :fixed="true"
      :border="false"></u-navbar>
    <!-- 顶部用户信息区域 -->
    <view class="user-section" @click="goToMine">
      <u-avatar style="border:solid 6rpx #FFB74D" :src="userInfo.avatar" size="120rpx" shape="circle"
        margin-right="32rpx">
      </u-avatar>
      <view class="flex-1">
        <u-text :text="userInfo.name" size="36rpx" color="#333333"></u-text>
        <u-text margin="10rpx 0 0 0" :text="'角色：张三的爸爸'" size="24rpx" color="#666"></u-text>
      </view>
      <u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
    </view>

    <view class="main" style="margin-top: -50rpx;">
      <!-- 菜单列表 -->
      <view class="bg-white radius padding">
        <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
          <u-icon :name="item.icon" size="48rpx"></u-icon>
          <view class="flex-1 margin-left-sm">
            <u-text color="#333" size="34rpx" :text="item.title">{{ item.title }}</u-text>
          </view>
          <u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 用户信息
const userInfo = ref({
  name: 'Zora',
  phone: '13907590188',
  avatar: '/static/image/img-math-bg.png' // 使用现有图片作为头像示例
})

// 菜单列表
const menuList = ref([
  {
    id: 1,
    title: '学员信息',
    icon: '/static/icon/icon-student-info.png',
    route: '/pages/common/personInfo/index'
  },
  {
    id: 2,
    title: '角色切换',
    icon: '/static/icon/icon-role.png',
    route: '/pages/common/changeRole/index'
  },
  {
    id: 3,
    title: '意见反馈',
    icon: '/static/icon/icon-feedback.png',
    route: '/pages/common/feedback/index'
  },
  {
    id: 4,
    title: '设置',
    icon: '/static/icon/icon-setting.png',
    route: '/pages/common/setting/index'
  }
])

// 方法
const goToMine = () => {
  uni.navigateTo({
    url: '/pages/common/mine/myInfo'
  })
}

const handleMenuClick = (item) => {
  // 可以根据需要跳转到对应页面
  uni.navigateTo({
    url: item.route
  })
}
</script>

<style scoped lang="scss">
.page {
  background: url('/static/image/bg-mine.png') #fafafa no-repeat top left;
  background-size: 100% auto;
}

.user-section {
  height: 300rpx;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding: 0 32rpx;
  gap: 20rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }
}
</style>